<template>
  <div
    class="ordinary-node-container"
    :style="{
      color: themeStyle[theme].textColor2,
      backgroundColor: nodeStyle.backgroundColor,
      border: `${nodeStyle.borderWidth}px ${nodeStyle.borderType} ${nodeStyle.borderColor}`,
      borderRadius: `${nodeStyle.borderRadius}px`
    }"
    @mousedown="nodeMouseDown"
    @mouseup="selectSelfNode"
  >
    <!-- 左上角显示的数字 -->
    <div v-if="showQuantity.includes(nodeType)" class="buffer-quantity">
      {{ quantity }}
    </div>

    <!-- 节点选中样式 -->
    <template v-if="selectedNode?.id === node?.id">
      <BorderRotate v-if="selectStyle === 'rotate'" :color="selectStyleColor" :width="3" />
      <Ripple v-if="selectStyle === 'ripple'" :color="selectStyleColor" :width="2" />
      <div
        v-if="selectStyle === 'mask'"
        class="mask"
        :style="{ background: selectStyleColor + '52' }"
      ></div>
    </template>

    <div v-if="nodeIcon">
      <div
        :style="{
          width: Number(nodeStyle.iconSize) + 'em',
          height: Number(nodeStyle.iconSize) + 'em'
        }"
        v-html="nodeIcon"
      ></div>
    </div>
    <DblclickEdit v-model:text="nodeName" style="z-index: 10" @edited="changeNodeName" />
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { inject, onMounted, ref } from 'vue'
import { Node } from '@antv/x6'
import { useCanvasParameterStore } from '@renderer/store/canvas/canvasParameter'
import BorderRotate from '@renderer/components/cssAnimation/BorderRotate.vue'
import Ripple from '@renderer/components/cssAnimation/Ripple.vue'
import { renderShowNodeProperty } from '@renderer/store/canvas/mainProcessData'
import DblclickEdit from '@renderer/components/dbclickEdit/DblclickEdit.vue'
import { getSvgIcon } from './hook'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const nodeMsg = inject('getNode') as any
const node = ref<Node | null>(null)
const nodeName = ref('')
const nodeIcon = ref('')
const nodeType = ref('')
//左上角数量
const quantity = ref(0)
//显示左上角数量的节点type
const showQuantity = ['produce', 'batchProcess', 'buffer', 'workerPool']

//选择的样式
const selectStyle = ref<'rotate' | 'ripple' | 'mask'>('rotate')
//选择的样式颜色
const selectStyleColor = ref<string>('#0087dc')

const nodeStyle = ref({
  backgroundColor: 'transparent',
  borderWidth: 1,
  borderType: 'solid',
  borderColor: '#cccccc',
  borderRadius: 5,
  icon: '',
  iconSize: 3
})

onMounted(() => {
  initNode()
})
//初始化节点的数据
const initNode = async (): Promise<void> => {
  const changeData = async () => {
    nodeName.value = node.value?.getData().name
    nodeIcon.value = await getSvgIcon(node.value?.getData().icon)
    nodeType.value = node.value?.getData().type
    quantity.value = node.value?.getData().quantity
    const keys = Object.keys(nodeStyle.value)
    for (const key of keys) {
      if (node.value?.getData()[key] !== undefined) {
        nodeStyle.value[key] = node.value?.getData()[key]
      }
    }
  }
  if (node.value === null) {
    node.value = nodeMsg() as Node
    changeData()

    node.value.on('change:data', async () => {
      changeData()
    })
  }
}

const canvasParameterStore = useCanvasParameterStore()
const { selectedNode } = storeToRefs(canvasParameterStore)

const timeMark = ref(false)
//鼠标按下
const nodeMouseDown = (): void => {
  timeMark.value = true
  setTimeout(() => {
    timeMark.value = false
  }, 200)
}
//鼠标松开选择自己
const selectSelfNode = (): void => {
  if (timeMark.value) {
    if (node.value) {
      //获取当前选择的样式
      const canvasProperties = window.api.handleCanvasData(
        'getCanvasProperties',
        'canvas2D',
        false,
        []
      )
      selectStyle.value = canvasProperties.selectedNodeStyle
      selectStyleColor.value = canvasProperties.selectedNodeStyleColor
      //选择节点
      window.api.handleCanvasData('selectNodesOrEdges', 'canvas2D', true, [[node.value.id]])
      //打开节点属性
      if (node.value) {
        renderShowNodeProperty(node.value as Node)
      }
    }
  }
}

const changeNodeName = (name: string): void => {
  if (node.value) {
    node.value.setData({ name })

    const nodes = window.api.handleCanvasData('getNodes', 'resourceMana', false, [
      'id',
      node.value.id
    ])
    const nodeData = nodes[0]
    nodeData.name = name
    //更新自己主进程的数据
    window.api.handleCanvasData('updateNodes', 'canvas2D', true, [nodeData])
    //更新一下自己的资源栏
    window.electron.ipcRenderer.send('changeNodeNameToResource', { id: node.value.id, name })

    //更新一下自己的属性栏
    renderShowNodeProperty(node.value as Node)
  }
}
</script>

<style scoped>
.ordinary-node-container {
  width: 100%;
  height: 100%;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}

.buffer-quantity {
  position: absolute;
  top: 0;
  left: calc(0% + 5px);
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 100;
}
</style>
